<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>审核管理</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">
		<style scoped>
			.audit-management {
				/* min-height: 100vh; */
				background-color: #f7f8fa;
				/* padding: 100px; */
				padding-top: 0px;
				/* nav-bar height + padding */
				padding-bottom: calc(50px + 16px);
				/* tabbar height + padding */
			}

			.function-cards {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				gap: 16px;
				padding: 16px 0;
				max-width: 100%;
			}

			.function-card {
				border-radius: 12px;
				overflow: hidden;
				max-width: 100%;
			
				/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); */
				text-align: center;
				

				img {
					max-width: 50%;
					width: 50%;
					min-width: 50%;
				}
			}

			.card-content {
				height: 100px;
				display: flex;
				align-items: center;
				padding: 0 24px;
				position: relative;
				overflow: hidden;
			}

			.card-content::after {
				/* 				content: '';
				position: absolute;
				left: 50%; */
				/* right: -30px; */
				/* 				top: 50%;
				transform: translate(-50%, -50%);
				width: 100px;
				height: 100px;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 50%; */
			}

			.card-icon {
				font-size: 24px;
				margin-right: 12px;
				/* color: #fff; */
			}

			.card-text {
				font-size: 18px;
				font-weight: 500;
				/* color: #fff; */
			}

			/* 渐变背景 */
			.orange-gradient {
				background-image: linear-gradient(to bottom, #ffffff, #ffecd1);
				border: 1px solid #f9b236;
				color: #f9b236;
				border-radius: 14px;
			}

			.red-gradient {
				background-image: linear-gradient(to bottom, #ffffff, #fddfdf);
				border: 1px solid #fc383a;
				color: #fc383a;
				border-radius: 14px;
			}

			.blue-gradient {
				background-image: linear-gradient(to bottom, #ffffff, #c2dfff);
				border: 1px solid #3d9af9;
				color: #3d9af9;
				border-radius: 14px;
			}

			.green-gradient {
				background-image: linear-gradient(to bottom, #ffffff, #cef6eb);
				border: 1px solid #0cd69a;
				color: #0cd69a;
				border-radius: 14px;
			}

			/* 点击效果 */
			.function-card:active {
				transform: scale(0.98);
				transition: transform 0.2s;
			}

			/* 底部导航样式 */
			.tab-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
			}

			.tab-item .van-icon {
				margin-bottom: 4px;
			}

			/* 适配不同设备尺寸 */
	/* 		@media screen and (min-width: 375px) {
				.function-cards {
					gap: 20px;
				}

				.card-content {
					height: 120px;
				}

				.card-icon {
					font-size: 28px;
				}

				.card-text {
					font-size: 20px;
				}
			} */

/* 			@media screen and (min-width: 414px) {
				.function-cards {
					gap: 24px;
				}

				.card-content {
					height: 140px;
				}

				.card-icon {
					font-size: 32px;
				}

				.card-text {
					font-size: 22px;
				}
			} */

			/* 适配 iPad 和平板设备 */
/* 			@media screen and (min-width: 768px) {
				.function-cards {
					grid-template-columns: repeat(2, 1fr);
					max-width: 900px;
					margin: 0 auto;
				}
			} */

			/* 暗黑模式支持 */
/* 			@media (prefers-color-scheme: dark) {
				.audit-management {
					background-color: #1c1c1e;
				}

				.function-card {
					/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); */
				/* } */
			/* } */ 

			/* iPhone X 及以上机型底部安全区域适配 */
/* 			@supports (padding-bottom: env(safe-area-inset-bottom)) {
				.audit-management {
					padding-bottom: calc(50px + 16px + env(safe-area-inset-bottom));
				}

				.van-tabbar {
					padding-bottom: env(safe-area-inset-bottom);
				}
			} */
			
			
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
				margin-bottom: 2rem;
			}
		</style>

		<style>
			/* 导航栏样式 */
			:deep(.van-nav-bar) {
				background-image: linear-gradient(to right, #4481eb, #04befe);
			}

			:deep(.van-nav-bar .van-icon),
			:deep(.van-nav-bar__title) {
				color: #fff !important;
			}

			/* 底部导航栏激活颜色 */
			:deep(.van-tabbar-item--active) {
				color: #4481eb !important;
			}

			/* 修复 iOS 点击高亮 */
			* {
				-webkit-tap-highlight-color: transparent;
			}
		</style>
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/wechat/js/vant.min.js"></script>
<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/scriptZIP/axios.min.js"></script>
		<!-- <script src="/js/common.js"></script> -->
	</head>

	<body>

		<div class="audit-management" id="app">
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>
			<!-- 功能卡片区域 -->
			<div class="function-cards">
				<!-- 请假申请 -->
				<div class="function-card" @click="goUrl('leaveApplication.html')">
					<img src="../image/img/1m.png" />
					<!-- <div class="card-content orange-gradient"> -->
					<!-- <van-icon name="friends-o" class="card-icon" /> -->

					<!-- <span class="card-text">请假申请</span> -->
				</div>
			<!-- </div> -->

			<!-- 停课申请 -->
			<div class="function-card" @click="goUrl('suspendClassesApplication.html')">
				<!-- <div class="card-content red-gradient"> -->
					<img src="../image/img/2m.png" />
					<!-- <van-icon name="pause-circle-o" class="card-icon" /> -->
					<!-- <span class="card-text">停课申请</span> -->
				<!-- </div> -->
			</div>

			<!-- 订单完善 -->
			<div class="function-card" @click="goUrl('orderCompletion.html')">

				<!-- <div class="card-content blue-gradient"> -->
					<img src="../image/img/3m.png" />
					<!-- <van-icon name="notes-o" class="card-icon" /> -->
					<!-- 					<span class="card-text">订单完善</span>-->
				<!-- </div> -->
			</div>

			<!-- 退款申请 -->
			<div class="function-card" @click="goUrl('refundApplication.html')">

				<!-- <div class="card-content green-gradient"> -->
					<img src="../image/img/4m.png" />
					<!-- <van-icon name="balance-o" class="card-icon" /> -->
					<!-- 						<span class="card-text">退款申请</span>-->
				<!-- </div> -->
			</div>
		</div>
		</div>

		<script>
			// 初始化 Vue 实例
			const app = Vue.createApp({
				data() {
					return {


					};
				},
				created: function() {
					// this.schoolId = localStorage.getItem('schoolId');
					// this.getList()

				},
				methods: {
					onAddClick() {
						this.goUrl('addStudent.html')
					},
					goUrl(url) {
						window.location = url
					},
					goBack() {
						history.back();
					},
					// filterclick(st) {
					// 	this.studentStatus = st;
					// 	this.list = []
					// 	this.pageNum = 1
					// 	 // this.finished = false;
					// 	this.getList()
					// },
					// onToLoad() {
					// 	this.loading = true;
					// 	  setTimeout(() => {
					// 		// if (this.refreshing) {
					// 		//   this.list = [];
					// 		//   this.refreshing = false;
					// 		// }
					// 		// this.refreshing = false;
					// 		// for (let i = 0; i < 10; i++) {
					// 		//   this.list.push(this.list.length + 1);
					// 		// }
					// 		this.loading = false;
					// 		  this.finished = true;
					// 		// this.pageNum += 1;
					// 		// this.pageNum += 1;

					// 		this.getList()

					// // 		if (this.list.length >= 40) {
					// // 		  finished.value = true;
					// // 		}
					// 	  }, 1000);
					// },
					// onRefresh() {
					// 	this.Loading = true;
					// 	this.finished = false;
					// 	this.pageNum = 1;
					// 	this.list = [];
					// 	this.onToLoad()

					// },
					// onSearch() {
					// 	this.list = []
					// 	this.refreshing = true
					// 	this.pageNum = 1
					// 	this.getList()
					// },
					// getList() {
					// 	axios.get('/t/getList', {
					// 		params: { schoolId: this.schoolId, name: this.searchValue, studentStatus: this.studentStatus, pageNum: this.pageNum, pageSize: this.pageSize  }
					// 	}).then(function (res) {
					// 		this.OjbList = res.data
					// 		 res.data.list.forEach(item => {
					// 			this.list.push(item)
					// 		});
					// 		this.loading = false;
					// 		this.finished = true;
					// 		if (this.list.length >= this.OjbList.total) {
					// 		  this.finished = true; // 没有更多数据了
					// 		} else {
					// 		  this.finished = false;
					// 		  this.pageNum++;
					// 		}
					// 		 // this.finished = true; // 没有更多数据了
					// 		// console.log('33344', this.list.length, res.data.total)
					// 		// if (this.list.length >= res.data.total) {
					// 		//   this.finished = true; // 没有更多数据了
					// 		// } else {
					// 		//   this.pageNum += 1;
					// 		//   }
					// 	}.bind(this));
					// },
					// enterShop() {
					// 	vant.Toast("进入店铺");
					// },

				},
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>